import React from 'react';
import {
  ArrowLeftOutlined,
  CalendarOutlined,
  EnvironmentOutlined,
  UserOutlined,
  ClockCircleOutlined,
  FileTextOutlined,
  StarOutlined
} from '@ant-design/icons';
import { Button, Toast, List, Badge } from 'antd-mobile';
import './orderDetail.css'; 

const orderDetailData = {
  orderNo: 'YL202308261589',
  createTime: '2023-08-26 10:23',
  status: '待使用',
  service: {
    name: '全身推拿理疗',
    img: 'https://picsum.photos/id/177/300/300',
    description: '通过专业的推拿手法，对全身经络进行疏通，缓解肌肉疲劳，促进血液循环，达到放松身心、调理身体的效果。包含肩颈、腰背、四肢等多部位精细调理，搭配草本精油，增强理疗效果。',
    duration: '60分钟'
  },
  clinic: {
    name: '中医馆(总店)',
    address: '北京市朝阳区中医路123号养生大厦3层',
    phone: '010-12345678',
    rating: 4.8
  },
  appointment: {
    time: '2023-08-26 14:30-15:30',
    patient: '张先生',
    doctor: '李医师（资深推拿师，10年经验）'
  },
  price: {
    original: 198,
    actual: 138,
    discount: '平台新客补贴60元'
  },
  payment: {
    method: '微信支付',
    time: '2023-08-26 10:25'
  }
};

const OrderDetail = () => {
  const handleCancel = () => {
    Toast.confirm('确定要取消本次预约吗？取消后可在“已取消”订单中查看，如需重新预约请联系客服', {
      confirmText: '确定取消',
      cancelText: '再想想',
      onConfirm: () => {
        Toast.show('预约已取消，可联系客服重新预约');
      }
    });
  };

  const goBack = () => {
    window.history.back();
  };

  return (
    <div className="or_d_order-detail-page">
      <header className="or_d_detail-header">
         <i className="fa fa-arrow-left"  style={{ color: '#8B5A2B', fontSize: '20px',cursor:'pointer' }} onClick={goBack}></i>
       
        <h1 className="or_d_header-title">订单详情</h1>
      <div style={{'width':'30px'}}></div>
      </header>

      <div className="or_d_status-card">
        <Badge
          color={orderDetailData.status === '待使用' ? '#0958D9' : '#52C41A'}
          text={orderDetailData.status}
          style={{ 
            backgroundColor: orderDetailData.status === '待使用' ? '#E6F4FF' : '#F0F9EB',
            '--text-color': orderDetailData.status === '待使用' ? '#0958D9' : '#52C41A',
            '--border-radius': '16px',
            'padding': '6px 12px',
            'fontSize': '16px',
            'fontWeight': '500'
          }}
        />
        <div className="or_d_order-no-time">
          <span className="order-no">订单编号: {orderDetailData.orderNo}</span>
          <span className="order-time">{orderDetailData.createTime}</span>
        </div>
      </div>

      <div className="or_d_service-card">
        <div className="or_d_service-header">
          <h3 className="or_d_service-title">{orderDetailData.service.name}</h3>
          <div className="or_d_clinic-rating">
            <StarOutlined className="or_d_rating-star" style={{ color: '#FFC107' }} />
            <span className="or_d_rating-text">{orderDetailData.clinic.rating}分</span>
          </div>
        </div>
        <div className="or_d_service-content">
          <div className="or_d_service-img-container">
            <img
              src={orderDetailData.service.img}
              alt={orderDetailData.service.name}
              onError={(e) => e.target.src = 'https://picsum.photos/id/1005/300/300'}
              loading="lazy"
              className="or_d_service-img"
            />
          </div>
          <div className="or_d_service-desc">
            <p className="or_d_service-desc-text">{orderDetailData.service.description}</p>
            <div className="or_d_service-meta">
              <div className="or_d_meta-item">
                <ClockCircleOutlined className="or_d_meta-icon" />
                <span className="or_d_meta-text">时长: {orderDetailData.service.duration}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="or_d_clinic-card">
        <List className="or_d_clinic-list">
          <List.Item
            prefix={<EnvironmentOutlined className="or_d_list-icon" />}
            className="or_d_list-item"
          >
            <span className="or_d_clinic-name">{orderDetailData.clinic.name}</span>
          </List.Item>
          <List.Item
                       prefix={<span className="or_d_address-icon">📍</span>}
            className="or_d_list-item"
          >
            {orderDetailData.clinic.address}
          </List.Item>
          <List.Item
            prefix={<span className="or_d_phone-icon">📞</span>}
            className="or_d_list-item"
          >
            {orderDetailData.clinic.phone}
          </List.Item>
          <List.Item
            prefix={<CalendarOutlined className="or_d_list-icon" />}
            className="or_d_list-item"
          >
            {orderDetailData.appointment.time}
          </List.Item>
          <List.Item
            prefix={<UserOutlined className="or_d_list-icon" />}
            className="or_d_list-item"
          >
            就诊人: {orderDetailData.appointment.patient}
          </List.Item>
          <List.Item
            prefix={<UserOutlined className="or_d_list-icon" />}
            className="or_d_list-item"
          >
            医师: {orderDetailData.appointment.doctor}
          </List.Item>
        </List>
      </div>

      <div className="or_d_price-card">
        <div className="or_d_price-item or_d_original-price">
          <span className="or_d_price-label">原价</span>
          <div>
            <span className="or_d_price-value">¥{orderDetailData.price.original}</span>
            <span className="or_d_price-strike">¥{orderDetailData.price.original}</span>
          </div>
        </div>
        <div className="or_d_price-item or_d_discount-price">
          <span className="or_d_price-label">优惠</span>
          <span className="or_d_price-discount">{orderDetailData.price.discount}</span>
        </div>
        <div className="or_d_price-item or_d_actual-price">
          <span className="or_d_price-label">实付款</span>
          <span className="or_d_price-actual">¥{orderDetailData.price.actual}</span>
        </div>
      </div>

      <div className="or_d_payment-card">
        <List className="or_d_payment-list">
          <List.Item
            prefix={<FileTextOutlined className="or_d_list-icon" />}
            className="or_d_list-item"
          >
            支付方式: {orderDetailData.payment.method}
          </List.Item>
          <List.Item
            prefix={<ClockCircleOutlined className="or_d_list-icon" />}
            className="or_d_list-item"
          >
            支付时间: {orderDetailData.payment.time}
          </List.Item>
        </List>
      </div>

      <div className="or_d_action-area">
        {orderDetailData.status === '待使用' && (
          <Button
            className="or_d_cancel-btn"
            onClick={handleCancel}
            style={{ 
              backgroundColor: '#F5F0EB', 
              color: '#8D6E63',
              boxShadow: '0 2px 4px rgba(141, 110, 99, 0.1)',
              transition: 'all 0.3s ease'
            }}
          >
            取消预约
          </Button>
        )}
        <Button
          className="or_d_back-list-btn"
          onClick={goBack}
          style={{ 
            backgroundColor: '#8D6E63', 
            color: '#fff',
            boxShadow: '0 3px 6px rgba(141, 110, 99, 0.2)',
            transition: 'all 0.3s ease'
          }}
        >
          返回订单列表
        </Button>
      </div>
    </div>
  );
};

export default OrderDetail;